/**
 * Tatoeba Project, free collaborative creation of multilingual corpuses project
 * Copyright (C) 2010  HO Ngoc Phuong Trang <tranglich@gmail.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http: //www.gnu.org/licenses/>.
 */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/css/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/css/fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(/css/fonts/MaterialIcons-Regular.woff) format('woff'),
    url(/css/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

html[dir="rtl"] .material-icons {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

/*
 * Generic rules
 */
body, select, input, textarea, button, option, optgroup {
    font-family: "Noto Sans", sans-serif;

    /* Fonts for other languages */
    /*
    "Noto Kufi Arabic", "Noto Naskh Arabic",
    "Noto Nastaliq Urdu", "Noto Sans Armenian", "Noto Sans Avestan",
    "Noto Sans Balinese", "Noto Sans Bamum", "Noto Sans Batak",
    "Noto Sans Bengali", "Noto Sans Brahmi", "Noto Sans Buginese",
    "Noto Sans Buhid", "Noto Sans CJK JP", "Noto Sans CJK KR",
    "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans Canadian Aboriginal",
    "Noto Sans Carian", "Noto Sans Cham", "Noto Sans Cherokee",
    "Noto Sans Coptic", "Noto Sans Cuneiform", "Noto Sans Cypriot",
    "Noto Sans Deseret", "Noto Sans Devanagari", "Noto Sans Egyptian Hieroglyphs",
    "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Glagolitic",
    "Noto Sans Gothic", "Noto Sans Gujarati", "Noto Sans Gurmukhi",
    "Noto Sans Hanunoo", "Noto Sans Hebrew", "Noto Sans Imperial Aramaic",
    "Noto Sans Inscriptional Pahlavi", "Noto Sans Inscriptional Parthian",
    "Noto Sans Javanese", "Noto Sans Kaithi", "Noto Sans Kannada",
    "Noto Sans Kayah Li", "Noto Sans Kharoshthi", "Noto Sans Khmer",
    "Noto Sans Lao", "Noto Sans Lepcha", "Noto Sans Limbu", "Noto Sans Linear B",
    "Noto Sans Lisu", "Noto Sans Lycian", "Noto Sans Lydian",
    "Noto Sans Malayalam", "Noto Sans Mandaic", "Noto Sans Meetei Mayek",
    "Noto Sans Mongolian", "Noto Sans Myanmar", "Noto Sans NKo",
    "Noto Sans New Tai Lue", "Noto Sans Ogham", "Noto Sans Ol Chiki",
    "Noto Sans Old Italic", "Noto Sans Old Persian", "Noto Sans Old South Arabian",
    "Noto Sans Old Turkic", "Noto Sans Oriya", "Noto Sans Osmanya",
    "Noto Sans Phags Pa", "Noto Sans Phoenician", "Noto Sans Rejang",
    "Noto Sans Runic", "Noto Sans Samaritan", "Noto Sans Saurashtra",
    "Noto Sans Shavian", "Noto Sans Sinhala", "Noto Sans Sundanese",
    "Noto Sans Syloti Nagri", "Noto Sans Syriac Eastern",
    "Noto Sans Syriac Estrangela", "Noto Sans Syriac Western",
    "Noto Sans Tagalog", "Noto Sans Tagbanwa", "Noto Sans Tai Le",
    "Noto Sans Tai Tham", "Noto Sans Tai Viet", "Noto Sans Tamil",
    "Noto Sans Telugu", "Noto Sans Thaana", "Noto Sans Thai", "Noto Sans Tibetan",
    "Noto Sans Tifinagh", "Noto Sans Ugaritic", "Noto Sans Vai",
    "Noto Sans Yi", "Noto Serif Armenian", "Noto Serif Georgian",
    "Noto Serif Khmer", "Noto Serif Lao", "Noto Serif Thai",
    */
}

div, p {
    word-wrap: break-word;
}

html, body {
    padding: 0;
    margin: 0;
    color: #222222;
    background: #F5F5F5;
    display: inline-block;
    min-width: 100%;
}

@media only screen and (min-width: 960px) {
    body {
        height: auto;
    }
}

textarea {
    border: 1px solid #ddd;
}

label, input[type="checkbox"] {
    vertical-align: middle;
}

a img {
    border: none;
}

a {
    color: #4caf50;
    text-decoration: none;
}

md-radio-button{
    margin: 16px 0px;
}

a:hover {
    cursor: pointer;
    color: #DD8800;
}
a.md-button:hover {
    color: inherit;
}

.titleAnnexeLink {
    font-weight: normal;
    font-size: 13px;
    padding: 2px 8px;
    margin: 5px;
    border-radius: 4px;
    color: #fff;
    background: #4caf50;
}

.titleAnnexeLink:hover {
    color: #fff;
}

h4 {
    margin: 10px 0 5px 20px;
    color: #555;
    font-size: 1.1em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

fieldset {
    border: none;
}

dt {
    font-weight: bold;
}

svg {
    display: block;
    width: inherit;
    height: inherit;
    fill: currentColor; /* Needs https://github.com/jonathantneal/svg4everybody
                           to work on every browser */
}

rt {
    font-size: 50%;
    color: #A1A1A1;
    /* Prevent selecting ruby text, for which copying is disabled.
     * From https://stackoverflow.com/a/4407335 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.translations rt {
    font-size: 66%;
}

/* 
 * Top menu
 */
.tatoeba-name {
    font-size: 24px;
    padding: 0 10px;
}

@media only screen and (max-width: 960px) {
    #top_menu_container .sidenav-menu md-content {
        margin-bottom: 20px;
    }
    #top_menu_container .sidenav-menu, 
    #top_menu_container .sidenav-menu md-list, 
    #top_menu_container .sidenav-menu md-content,
    #top_menu_container .sidenav-menu .md-subheader {
        background-color: #414141;
        color: #fff;
    }
    #top_menu_container .sidenav-menu .md-subheader {
        color: #ccc;
    }
}

#top_menu_container {
    background-color: #414141;
    border-bottom: 1px solid #000000;
    min-height: 66px;
}

#top_menu {
    max-width: 960px;
    margin: auto;
}

#top_menu:hover {
    z-index: 70;
}

#top_menu .dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
}

#top_menu .dropdown .label {
    line-height: 40px;
    padding: 0 12px;
}

#top_menu .dropdown:hover {
    background-color: #333;
}
  
#top_menu .dropdown-content {
    display: none;
    position: absolute;
    width: 225px;
    background-color: #333;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#top_menu .dropdown:hover .dropdown-content {
    display: block;
}

#top_menu .dropdown-content .item a {
    display: block;
    padding: 12px 16px;
}

#top_menu .dropdown-content .item:hover {
    background-color: #222;
}

#top_menu .private-messages {
    position: relative;
}
#top_menu .unread {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    right: 4px;
    bottom: 4px;
}

#top_menu a,
#top_menu .md-button, 
#top_menu md-icon,
#top_menu md-menu-item md-icon,
.sidenav-menu .md-icon-button md-icon {
    color: #FFFFFF;
}

.sidenav-menu {
    z-index: 80;
}

#user-menu md-divider {
    border-top-color: #555;
}

#user-menu {
    margin: 0 10px;
}
#user-menu .dropdown-content {
    right: 0;
}
html[dir="rtl"] #user-menu .dropdown-content {
    right: initial;
    left: 0;
}
#user-menu .label span,
#user-menu .label img {
    margin: 0 2px;
    vertical-align: middle;
}
#user-menu .item span,
#user-menu .item md-icon {
    margin: 0 2px;
    vertical-align: middle;
}

/*
 * Container
 */

.container {
    max-width: 960px;
    margin: auto auto 10px;
}


/*
 * search bar
 */

 #search-bar-minimal {
    display: none;
}

#search-bar {
    min-height: 92px;
    background-color: #4caf50; /* Material's green */
}

#search-bar a {
    color: white;
}

#search-bar label {
    color: white;
    font-size: 15px;
}

#search-bar label[for="SentenceQuery"] {
    display: none;
}

#SentenceSearchForm {
    max-width: 960px;
    margin: auto;
}

#SentenceQuery {
    max-width: 400px;
    font-size: 20px;
    padding: 5px 30px 5px 5px;
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
}

html[dir="rtl"] #SentenceQuery {
    padding: 5px 5px 5px 30px;
}

#search-bar select {
    background-color: #FFFFFF;
    color: #111111;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    width: 200px;
    font-size: 14px;
    height: 36px;
}

#search-bar .input {
    position: relative;
}

#search-bar #clearSearch {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #CCCCCC;
    margin-left: -30px;
}

html[dir="rtl"] #search-bar #clearSearch {
    margin-left: 0;
    margin-right: -30px;
}

#search-bar .search-submit-button {
    width: 70px;
    min-width: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

#search-bar .search-submit-button.md-raised:hover {
    background-color: #DDDDDD;
}

#search-bar #arrow {
    padding: 0 10px;
    line-height: 40px;
    cursor: pointer;
}

.search-bar-extra a {
    color: #FFFFFF;
    margin: 0 10px;
    font-size: 15px;
}

.search-bar-extra a:hover {
    color: #111111;
}

.search-bar-extra a:before {
    content: '▸ ';
}

html[dir="rtl"] .search-bar-extra a:before {
    content: ' ◂';
}

/*
 * Responsive search bar
 */
@media only screen and (max-width: 960px) {
    .responsive #search-bar {
        display: none;
    }

    .responsive #search-bar-minimal {
        display: flex;
    }
    .responsive #search-bar-minimal md-input-container label {
        color: red;
    }
    .responsive #search-bar-minimal .md-toolbar-tools {
        padding: 0 5px 0 10px;
    }
    .responsive #search-bar-minimal .md-errors-spacer {
        display: none;
    }
    .responsive #search-bar-minimal input {
        color: #fff;
    }

    .responsive #content {
        padding: 0;
    }
}

/*
 * Logo
 */
#logo {
    color: #EEEEEE;
    font-size: 24px;
    margin-right: 10px;
}

#logo .tatoeba-name,
#logo img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

#tatoeba {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    display: inline-block;
    padding: 5px 8px 5px 13px;
    background: #fff;
    color: #649B3D;
    font-size: 12px;
    border-top-left-radius: 20px;
    font-weight: bold;
}

/*
 * Content
 */

#content {
    width: 100%;
    background: #FFFFFF;
    min-height: 550px;
    padding: 20px 0;
}

#annexe_content {
    float: right;
    width: 270px;
}

#main_content {
    margin-right: 290px;
}

#main_content section {
    margin-bottom: 20px;
}

.section {
    padding: 20px;
    margin-bottom: 20px;
}
.section > h1, .section > h2 {
    margin-top: 5px;
}

.module {
    padding: 10px 10px 5px 10px;
    margin: 0 0 20px 0;
    font-size: 14px;
    background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0) 100%);
}

#annexe_content .module {
    margin-left: 5px;
}

#annexe_content ul {
    margin: 0;
    padding-left: 0;
}

#annexe_content ul li {
    list-style-type: none;
}

/*
 * Sidebar
 */
@media only screen and (min-width: 960px) {
    .md-sidenav-right .close {
        display: none;
    }
}

.md-sidenav-right {
    position: fixed;
}

.md-sidenav-backdrop {
    position: fixed;
}

/*
 * Footer
 */
#footer {
    padding-bottom: 10px;
    max-width: 960px;
    margin: auto;
}

#footer .category {
    padding: 10px;
    width: 100%;
    padding: 0;
}

#footer .category h3 {
    border-bottom: 1px solid #E2E2E2;
    font-size: inherit;
    font-weight: normal;
    padding: 10px;
    margin: 10px;
}

#footer li {
    padding: 2px 0;
}
#footer .license {
    display: flex;
    font-size: 15px;
    margin: 20px;
}
#footer .license .text,
#footer .cc-by-icon {
    display: inline-block;
}
#footer .license .text {
    max-width: 820px;
    margin: 0 10px;
}
#footer .more-info {
    padding: 10px;
}

/*
 * HTML Elements
 */
.more_link {
    text-align: right;
}


/*
 * ">>"
 */
.ToLanguage {
    font-size: 1.3em;
    margin: 0 5px;
}

/*
 * Flash message
 */
#flashMessage {
    margin: 20px 5% 40px 5%;
    padding: 20px;
    color: #ffffff;
    background: #424242;
    border: none;
    border-radius: 2px;
}

/*
 * Warning
 */
.warning {
    font-size: 15px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #FFC1B5;
    background-color: #FFDDD6;
    color: #D1523C;
}

/*
 * Important
 */
.important {
    color: red;
}

#session_expired {
    color: red;
    padding: 10px;
    background-color: #F1F1F1;
    border: #E1E1E1 1px solid;
}

/*
 * Login Form
 */
#UserLoginForm_FromBar {
    position: absolute;
    top: 60px;
    z-index: 1000;
    min-width: 270px;
    padding: 5px 10px;
    background: #414141;
    color: #FFF;
    border: 1px solid #000000;
    border-top: none;
}

#UserLoginForm_FromBar fieldset {
    border: 0;
    text-align: right;
    line-height: 25px;
}

#UserLoginForm_FromBar label {
    text-align: right;
}

#UserLoginForm_FromBar input[type='text'], #UserLoginForm_FromBar input[type='password'] {
    width: 120px;
    display: inline-block;
    padding: 3px 5px;
    color: #414141;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

#UserLoginForm_FromBar input[type='submit'] {
    width: 120px;
    background: #222;
    display: inline-block;
    padding: 4px 10px 5px;
    color: #FFF;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    font-size: 0.9em;
}

#UserLoginForm_FromBar p {
    margin: 0;
    padding: 0;
}


/*
 * Other
 */
.annexeMenu {
    list-style: none;
}

.annexeMenu .item {
    margin: 5px 0;
}

.annexeMenu .item:before {
    content: "\00BB \0020";
}

.profile-actions {
    margin: 20px 0;
}

.profile-action-item {
    display: block;
    margin: 5px 0;
}

.profile-action-item svg,
.profile-action-item span {
    display: inline;
    vertical-align: middle;
    margin-right: 3px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hint {
    font-size: 13px;
    color: #666666;
 }

.language-icon {
    filter: drop-shadow(1px 1px 1.33px rgba(204,204,204,1));
    fill: initial; /* Don't color flags with currentColor */
}


/*
 *
 */
.announcement-container {
    background-color: #fff;
    overflow: hidden;
}
.maintenance span {
    display: inline-block;
    color: #ffffff;
    font-size: 20px;
    max-width: 960px;
}
.maintenance {
    text-align: center;
    padding: 10px;
    background: #d11;
}
.announcement {
    max-width: 960px;
    margin: auto;
    padding: 5px;
    background: #06A;
    color: #ffffff;
    margin-bottom: 10px;
}

.announcement p,
.announcement md-icon {
    margin: 10px 10px 0px 10px;
}

.announcement a,
.announcement md-icon,
.announcement .md-button.md-primary {
    color: #FFD800;
}

/*
 * Angular Material override
 */

md-toolbar {
    transition: none;
}

md-list-item.md-2-line .md-list-item-text h3,
md-list-item.md-2-line > ._md-no-style .md-list-item-text h3,
md-list-item.md-3-line .md-list-item-text h3,
md-list-item.md-3-line > ._md-no-style .md-list-item-text h3 {
    line-height: inherit;
}

md-card md-card-header md-card-avatar .md-user-avatar, 
md-list-item .md-avatar,  
md-list-item .md-list-item-inner .md-avatar {
    border-radius: 10%;
}

md-list {
    padding: 0;
}

.md-button-right input {
    padding-right: 40px;
}
.md-button-right .md-button {
    min-width: 40px !important;
    position: absolute;
    right: -8px;
    top: -3px;
}

html[dir="rtl"] .md-button-right input {
    padding-left: 40px;
}
html[dir="rtl"] .md-button-right .md-button {
    left: -8px;
    right: initial;
}

.md-tooltip {
    font-size:   16px; /* instead of 14px */
    height:      36px; /* instead of 32px */
    line-height: 36px; /* instead of 32px */
}
@media (min-width: 960px) {
    .md-tooltip {
        font-size:   14px; /* instead of 10px */
        height:      30px; /* instead of 22px */
        line-height: 30px; /* instead of 22px */
    }
}
